<template>
    <div class="operatorAuthority">
        <div class="widgets bg-white">
            <el-form :inline="true" :model="readerRowData" ref="readerRowForm" size="mini" class="operatorForm" status-icon>
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model="readerRowData.userName" readonly></el-input>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="readerRowData.name" readonly></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="operatorDiv" style="height: calc(100% - 55px) !important;min-width: 669px;overflow-x: auto;">
            <el-tabs v-model="activeName2" class="operatorTabs" style="background: #fff;">
                <el-tab-pane label="所属用户组" name="first" class="tabTitle">
                    <v-authorizationUserGroup/>
                </el-tab-pane>
                <el-tab-pane label="模块权限" name="second" class="tabTitle">
                    <v-modulePermissions/>
                </el-tab-pane>
                <el-tab-pane label="客户查看权限" name="third" class="tabTitle">
                    <v-customerViewPermission/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import AuthorizationUserGroup from './userGroup'
import ModulePermissions from './modulePermissions'
import CustomerViewPermission from './customerViewPermission'
export default {
    components: {
        'v-authorizationUserGroup': AuthorizationUserGroup,//所属用户组
        'v-modulePermissions': ModulePermissions,//模快权限
        'v-customerViewPermission':CustomerViewPermission//客户查看权限
    },
    data(){
        return {
            readerRowData:{                         //存储授权数据
                userName: this.$store.state.userManagementStore.userName[0],
                name: this.$store.state.userManagementStore.name[0]
            },
            activeName2: 'first',                   //授权默认显示第一个tab
            systemId: this.$store.state.systemId,
            userId: this.$store.state.userManagementStore.userId,
        }
    }
}
</script>
<style lang="less">
.operatorAuthority {
    height: 100%;
    margin-top: 10px !important;
    .operatorForm{
        background: #fff;
        padding: 8px 0px;
        border-radius: 5px 5px 0px 0px;
        padding-left: 10px;
        min-width: 659px;
        margin-top: 0 !important;
        .el-form-item--mini.el-form-item{
            width: auto !important;
            margin-bottom: 0px !important;
            margin-left: 10px;
        }
    }
    .el-tabs__content{
        height: calc(100% - 60px) !important;
    }
    .el-transfer{
        height: 100% !important;
        .el-transfer-panel{
            width: 260px !important;
            height: calc(100% - 10px) !important;
            .el-transfer-panel__body{
                height: calc(100% - 40px) !important;
                .el-transfer-panel__list{
                    height: calc(100%) !important;
                }
            }
        }
    }
    .el-tabs__nav-scroll{
        padding-left: 20px
    }
    .tabTitle{
        padding: 5px 20px;display: flex;justify-content: center;
        height: calc(100% - 45px) !important;
    }
    .el-table__body{
        width: 100% !important;
    }
    .el-table td{
        border-bottom: 0px !important;
        padding: 3px 0px !important;
    }
    .el-input--mini .el-input__inner{
        height: 28px !important;
        line-height: 28px !important;
    }
    .el-checkbox.is-disabled + span {
        cursor: not-allowed !important;
        color: #aaa8a8 !important;
    }
}
</style>
